<template>
  <div class="home">
    <div class="banner_bg-createjs">
      <canvas id="stage" ref="canvasDom"></canvas>
      <div class="flex-row main">
        <section class="section">
          <div class="home_banner_logo img svg"></div>
          <div>
            <p class="banner_text">A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.</p>
          </div>
          
        </section>
        <img alt="Vue logo" src="../assets/logo.png" id="vuelogo">
      </div>
      
    </div>
    
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript + CreateJS App"/>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import createjs from 'createjs-ts';
import { createStage } from '../utils/CreateJSUtil';
import ExportRoot from '../game/ExportRoot';

export default defineComponent({
  name: 'HomeView',
  components: {
    HelloWorld,
  },
  setup(props, ctx) {
    const canvasDom = ref<HTMLCanvasElement>()
    onMounted(()=>{
      const canvas = canvasDom.value|| document.createElement('canvas')
      //console.log(canvas.clientWidth,canvas.clientHeight)
      canvas.width=canvas.clientWidth
      canvas.height=canvas.clientHeight
      const stage = createStage(canvas)
      stage.setBounds(0,0,canvas.width,canvas.height)
      const root = new ExportRoot();
      stage.addChild(root);
    })
    return {
      canvasDom
    } 
  },
});
</script>
<style lang="less" scoped>
.home{
  .banner_bg-createjs{
    position: relative;
    background: linear-gradient(to bottom, #fff29d 0, #ffd70f 100%);
    .main{
      justify-content: flex-start;
      position: relative;
      .section{
        padding: 100px 40px;
        .home_banner_logo{
          background-image: url(@/assets/images/svg/createjs-logo-horizontal-gray-darker.svg);
          background-position: center;
          background-repeat: no-repeat;
          width: 578px;
          height: 154px;
        }
        .banner_text {
          color: #4c6575;
          text-transform: none;
          max-width: 61.6rem;
          font-size: 20px;
          line-height: 24px;
          padding: .5rem 0 1.7rem;
          font-family: effra, sans-serif;
          font-style: normal;
          font-weight: bold;
          text-align: left;
        }
      }
    }
  }
}
#stage{
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
#vuelogo{
  height: fit-content;
  padding: 100px 40px;
}
</style>